// pages/index/soundCard/soundCard.js
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    testUrl: '',
    imgPath: '',
    isX: false, // 是否横向显示
    movableH: 0, // 相框高
    movableW: 0, // 相框宽
    imgWidth: 0, // 图片原始宽度
    imgHeight: 0, // 图片原始高度
    dragX: 0, // X轴拖动
    dragY: 0, // Y轴拖动
    scale: 1, // 缩放比例
    p: 1, // 相框高宽比例
  },

  onLoad: function (options) {

    let that = this,
      h,
      w
    wx.getImageInfo({ // 获取图片信息
      src: options.path,
      success: function (res) {
        that.setData({
          isX: res.width > res.height ? true : false,
          imgPath: options.path,
          p: res.height / res.width,
          imgWidth: res.width,
          imgHeight: res.height
        })
      }
    })
  },
  onReady: function () {
    let that = this
    wx.createSelectorQuery().select('#addPic').boundingClientRect(function (rect) {
      console.log(rect)
      that.setData({
        movableH: (rect.height - 6) * 2,
        movableW: (rect.width - 6) * 2
      })
    }).exec()

  },
  uploadDoc(pics) {
    console.log("ds")
    const tempFilePaths = pics;
    wx.uploadFile({
      url: app.globalData.host + '/v3/file/uploadPic', // 仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        console.log(res)
        console.log("上传")
        // do something
      }
    })
  }
  ,

  dragImg(e) { // 拖动
    console.log('1', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y
    })
  },
  scaleImg(e) { // 缩放
    console.log('2', e.detail)
    this.setData({
      // dragX: e.detail.x,
      // dragY: e.detail.y,
      scale: e.detail.scale
    })
  },
  cancel() { // 取消
    console.log('2')
    wx.navigateBack({
    })
  },
  outputPic:function() {
    
    let that = this,
      w = this.data.movableW / 2 - 6, //rpx -> px
      h = w * this.data.p
    console.log(this.data.movableH, this.data.movableW)
    let ctx = wx.createCanvasContext('picBox') // 创建上下文
    console.log('width=', this.data.imgWidth, 'height=', this.data.imgHeight)
    ctx.drawImage(
      this.data.imgPath,
      this.data.dragX / w * this.data.imgWidth,
      this.data.dragY / h * this.data.imgHeight,
      this.data.imgWidth * this.data.scale,
      this.data.imgHeight * this.data.scale
    )
    ctx.draw() // 绘制
    console.log(this.data.imgPath)
    setTimeout(() => { // 绘制有延迟
      wx.canvasToTempFilePath({
        canvasId: 'picBox',
        destWidth: that.data.isX ? 1700 : 1100,
        destHeight: that.data.isX ? 1100 : 1700,
        quality: 1,
        success: function (res) {
          console.log(res.tempFilePath)
          // TODO: 将图片传到后台
          let h,
              w,
            path = res.tempFilePath
          wx.getImageInfo({ // 获取图片信息
            src: path,
            success: function (res) {
              console.log(res)
              console.log("绘制" + res.path)
              
              that.setData({
                testUrl: res.path
              })

              //文件上传至后台
              const tempFilePaths = res.path;
              console.log(tempFilePaths+"虎猫鼠")
              wx.uploadFile({
                url: app.globalData.host + '/v3/file/uploadPic', // 仅为示例，非真实的接口地址      
                filePath: tempFilePaths,
                name: 'file',
                formData: {
                  //user: 'test',
                  'printType': 110,
                  'fileType': 1, // 1 照片 2 文档
                  'fileIds': tempFilePaths,
                  'printLater': true
                },
                success(res) {
                  const data = res.data
                  console.log(res)
                  console.log("上传")
                  // do something
                }
              })
              // w = that.data.movableW
              // h = that.data.movableH
              // that.setData({
              //   isX: res.width > res.height ? true : false,
              //   imgPath: path,
              //   movableH: h,
              //   movableW: w,
              //   imgWidth: res.width,
              //   imgHeight: res.height
              // })
            }
          })
            
        }
      })
    }, 500)
     
  }
})